<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<jsp:include page="../framework/header.jsp" />
<link href="${pageContext.request.contextPath}/static/plugin/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
<link href="${pageContext.request.contextPath}/static/plugin/daterangepicker/daterangepicker.min.css" rel="stylesheet">
<style>
/* 	.btn-default { */
/* 	    background-color: #c2c2c2; */
/* 	    border-color: #c2c2c2; */
/* 	    color: #333333; */
/*      } */
     .form-inline .form-control {
    width: 100%;
}

/* .input-group .input-group-btn { */
/*     width: 0!important;  */
/* } */
	</style>
<div id="container"
	class="effect aside-float aside-bright mainnav-lg navbar-fixed mainnav-fixed aside-fixed">
	<jsp:include page="../framework/topper.jsp" />
	<div class="boxed">
		<!--=======================  页面主体内容  ============================-->
		<div id="content-container">
			<div class="wrapper">
				<!--=========================  页面标题  ==========================-->
				<div id="page-title">
						<p class="page-header text-overflow table-header">
							基础表单&nbsp;&nbsp;<small>注：本页面每个panel为独立样式，若结合在一个页面要按照ui规则中进行微调</small>
						</p>
					</div>
					<ol class="breadcrumb">
						<li><a href="#">UI样式</a></li>
						<li class="active">基础表单</li>
					</ol>
					
					<div id="page-content" class="form-horizontal">
					
						<div class="panel">
							<div class="panel-heading">
					 			<div class ="panel-title mainpanel panel-subtitile">基本表单示例</div>	
					 		</div>
							<div class="panel-body">
								<div class = "row" >
						         	<div class="form-group col-sm-6 col-xs-6" > 
						            	<label class="col-xs-2 control-label" ><font style="color:red">*</font>必填:</label>
						            	<div class="col-xs-10" style="padding-right:0;">
											<input type = "text" class="form-control"   placeholder="请输入"  list="account" oninput="userMatch()">
											<datalist id="account">
											</datalist>
										</div>   
						         	</div>
						         	<div class = "form-group col-sm-6 col-xs-6" > 
						            	<label class="col-xs-2 control-label" >非必填:</label>
						            	<div class="col-xs-10" style="padding-right:0;">
											<input type = "text" class="  form-control"   placeholder="请输入" >    
										</div>
									</div>
								</div>
								
								 <div class = "row">
						         	<div class="form-group col-sm-6 col-xs-6" > 
						            	<label class="col-xs-2 control-label" >单选1:</label>
						            	<div class="col-xs-10" style="padding-right:0;">
											<select class=" form-control">    
												<option value = '0'>管理员</option>
												<option value = '3'>系统用户</option>
												<option value = '1'>高级用户</option>
												<option value = '2'>普通用户</option>
											</select>  
										</div>   
						         	</div>
						         	<div class = "form-group col-sm-6 col-xs-6" > 
						            	<label class="col-xs-2 control-label" >单选2:</label>
										<div class="col-xs-10" style="padding-right:0;">
											<select class="selectpicker" data-width="100%">
				                                <option>HTML</option>
				                                <option>CSS</option>
				                                <option>jQuery</option>
				                                <option>Javascript</option>
				                            </select>
										</div>
									</div>
								</div>
								<div class = "row">
						         	<div class="form-group col-sm-6 col-xs-6" > 
						            	<label class="col-xs-2 control-label">多选:</label>
						            	<div class="col-xs-10" style="padding-right:0;">
											<select class="selectpicker" multiple title="请选择..." data-width="100%">
				                                <option>Family</option>
				                                <option>Friend</option>
				                                <option>Partner</option>
				                            </select>
										</div>   
						         	</div>
						         	<div class = "form-group col-sm-6 col-xs-6" > 
						            	<label class="col-xs-2 control-label" >时间选择器:</label>
										<div class="col-xs-10" style="padding-right:0px;">
											<div class="input-group">
												<input id="daterangepicker" name="date-range-picker"
													   class="form-control text-center">
												<div class="input-group-addon">
													<i class="fa fa-calendar"></i>
												</div>
											</div>
										</div>
									</div>
								</div>
								 <div class = " row">
						         	<div class="form-group col-sm-6 col-xs-6" > 
						            	<label class="col-xs-2 control-label">搜索框1:</label>
										<div class="col-xs-10 input-group" style="padding-right:0px;">
											<input type="text"  placeholder="请输入..." class="form-control">
											  	<span class="input-group-btn" style="width:0.1px;">
													<button class="btn btn-icon btn-primary" type="button">
														<i class="fa fa-search"></i>
													</button>
												</span>
										</div>   
						         	</div>
						         	<div class="form-group col-sm-6 col-xs-6">
									<label class="col-sm-2 control-label">搜索框2:</label>
									<div class="col-sm-10" style="padding-right:0px;"> 
										<input id="dockerClusterName" name="dockerClusterName"
											onclick="docclu.openDockerlayer();" placeholder="请输入..."
											class="form-control"> <i class="fa fa-search"
											style="float: right; margin-top: -20px; margin-right: 10px;"
											onclick="openDockerlayer();"></i> 
										
									</div>
									
								</div>
								</div>

								<div class = "row" >
							    	<div class = "form-group col-sm-12 col-xs-12" style="padding-left:5px;">
							            <label class="col-xs-1" style="padding:6px 0 0 0;text-align:right;">备注:</label>
							            <div class="col-xs-11" style="padding-right:0;">
											<textarea class="form-control" style = "resize: vertical;width:96.5%;" rows="4" 
						            		id = "remark" name = "remark"></textarea>    
										</div>
									</div>
								</div>
                                 
								
								
							
								
						</div>
					</div>
					<div class="panel">
							<div class="panel-heading"style="height:46px;">
					 			<div class ="panel-title mainpanel panel-subtitile">单级输入框（带统一标题）</div>	
					 		</div>
							<div class="panel-body"style="padding:0px 0px 20px 0px;">
                                 <div class = "form-group label-height">
									<label class="col-sm-1 col-sm-offset-2 control-label" style="text-align: left;">应用配置路径</label>
									<label class="col-sm-1 col-sm-offset-3 control-label" style="text-align: left;">选择配置文件</label>
								</div>
								<div class ="form-group">
									<label for="configPath1" class="label-control col-sm-1 col-sm-offset-1 text-right" style="margin-top:3px;"><i class="glyphicon glyphicon-question-sign sign-input" style="top:2px!important;"></i> 配置文件</label>
									<div class="col-sm-4">
										<input id="configPath1" type="text" placeholder="请输入配置路径" class="form-control" />
									</div>
									<div class="col-sm-4">
										<input name="configPath2" type="text" placeholder="请输入配置路径" class="form-control"/>
									</div>
								</div>
								<div class ="form-group">
									<label for = "remark" class="label-control col-lg-1 col-sm-offset-1 text-right" style="margin-top:3px;">配置描述</label>
									<div class = "col-sm-8">
										<input class="form-control" name="remark" type="text" placeholder="请输入配置路径" style="width:100%"/>
									</div>
									<div class ="col-sm-1">
                                         <a class="btn btn-icon btn-hover-primary">
                                             <i class="fa fa-minus"></i>
                                         </a>
									</div>
								</div>
								<div class ="form-group">
									<label for = "remark" class="label-control col-lg-1 col-sm-offset-1 text-right" style="margin-top:3px;font-size:14px">配置描述</label>
									<div class = "col-sm-8">
										<input class="form-control" name="remark" type="text" placeholder="请输入配置路径" style="width:100%"/>
									</div>
									<div class ="col-sm-1">
                                         <a class="btn btn-icon btn-hover-primary">
                                             <i class="fa fa-minus"></i>
                                         </a>
									</div>
								</div>
								<div class ="form-group">
									<div class="col-sm-2 col-sm-offset-2">
										<a class="btn btn-primary" data-origin="control-base"> <i class="fa fa-plus"></i> 新增项目</a>
									</div>
								</div>
							</div>
						</div>
					 <div class="panel">
							<div class="panel-heading">
					 			<div class ="panel-title mainpanel panel-subtitile">输入框（校验样式）</div>	
					 		</div>
							<div class="panel-body">
								<form id="validatorForm">
	                                 <div class = "form-group">
										<label for="1" class="label-control col-sm-4 text-right" style="margin-top:7px;"><font color="red">*</font>请输入</label>
										<div class = "col-sm-4 ">
											<input id="1" name = "port" class = "form-control"  autocomplete="off" placeholder="请输入" type="text" data-bv-field="repoUrl0"/>
										</div>
									</div>
									<div class = "form-group">
										<label for="2" class="label-control col-sm-4 text-right" style="margin-top:7px;"><font color="red">*</font>正文内容</label>
										<div class = "col-lg-4 ">
											<input id="2" class = "form-control"  autocomplete="off" placeholder="请输入" type="text"data-bv-field="repoUrl0"/>
										</div>
									</div>
									<div class ="form-group">
										<label for="3" class="label-control col-sm-4 text-right" style="margin-top:7px;">正文内容</label>
										<div class = "col-lg-4">
											<input id="3" style="width:100%" class = "form-control" type="text" placeholder="请输入"/>
										</div>
									</div>
									<div class ="form-group">
										<label for="4" class="label-control col-sm-4 text-right" style="margin-top:7px;">正文内容</label>
										<div class = "col-lg-4">
											<input id="4" name = "remark" style="width:100%" class="form-control" type="text" placeholder="请输入"/>
										</div>
										<div class ="col-lg-4">
	                                               
										</div>
									</div>
								</form>
							</div>
							
						</div>
						<div class="panel">
							<div class="panel-heading">
					 			<div class ="panel-title mainpanel panel-subtitile">输入框（普通带图标）</div>	
					 		</div>
							<div class="panel-body">
                                 <div class = "form-group">
									<label class="label-control col-lg-4 text-right" style="margin-top:7px;">副本数</label>
									<div class = "col-lg-4">
										<input id="6" name="6" type="text" placeholder="请输入配置路径" class="form-control"/>
									</div>
								</div>
								<div class = "form-group">
									<label for = "7" class="label-control col-lg-4 text-right" style="margin-top:7px;"><i class="glyphicon glyphicon-question-sign sign-input" style="margin-right: 5px;top:2px!important;"></i>CPU</label>
									<div class="col-lg-4">
										<input id="7" name="7" type="text" placeholder="请输入文字" class="form-control"/>
									</div>
								</div>
								<div class ="form-group">
									<label class="label-control col-lg-4 text-right" style="margin-top:2px;"><i class="glyphicon glyphicon-question-sign sign-input" style="margin-right: 5px;top:3px!important;"></i>启动命令</label>
									<div class="col-lg-4">
									<p>
										<input id="checkbox_close" type="checkbox" class="toggle-switch" autocomplete="off">
										<label for="checkbox_close" class="switch-large"></label>
									</p>
									</div>
								</div>
								<div class ="form-group">
									<label class="label-control col-lg-4 text-right" style="margin-top: 3px;">服务类型</label>
									<div class="col-lg-4">
									<p>
										<input id="checkbox_close1" type="checkbox" class="toggle-switch" autocomplete="off">
										<label for="checkbox_close1" class="switch-large"></label>
									</p>
									</div>
								</div>
							</div>
						</div>
						<!-- 多输入框 -->
						<div class="panel">
							<div class="panel-heading">
					 			<div class ="panel-title mainpanel panel-subtitile">多级输入框</div>	
					 		</div>
							<div class="panel-body">
								<div class="panel panel-sub" id="100">
									<div class="panel-heading">
										<div class="panel-control">
											<button class="btn btn-default" data-target="#body-100" data-toggle="collapse" aria-expanded="true" onclick="$(this).find('i').toggleClass('fa-chevron-down  fa-chevron-right')"><i class="fa fa-chevron-down"></i>
											</button>
										</div>
							 			<div class ="panel-title">环境变量 <span class="text-success">class="panel panel-sub"</span></div>	
							 		</div>
									<div id="body-100" class="panel-body withtitle collapse in"aria-expanded="true">
										<div class="form-group label-height">
											<label for = "tabPort" class="col-sm-5 col-sm-offset-2 control-label text-left"> 
													键
											</label>
											<label for = "tabPort" class="col-sm-5  control-label text-left"> 
													键
											</label>
										</div>
										<div class="form-group">
											<div class="col-sm-4 col-sm-offset-2">
												<input class="form-control" type="text" placeholder="请输入配置路径" style="width:100%"/>
											</div>
											<div class="col-sm-4">
												<input class="form-control" type="text" placeholder="请输入配置路径" style="width:100%"/>
											</div>
										</div>
										<div class= "form-group">
											<label for = "10" class="label-control col-sm-1 col-sm-offset-1 text-right" style="margin-top:3px; ">配置描述</label>
											<div class = "col-sm-8">
												<input id="10" class="form-control" name="baseinput" type="text" placeholder="请输入配置路径" style="width:100%"/>
											</div>
											<div class ="col-sm-1 pull-left">
		                                        <a class="btn btn btn-icon btn-hover-primary">
		                                            <i class="fa fa-minus"></i>
		                                        </a>
											</div>
										</div>
										<div class="form-group">	
											<div class="col-sm-2 col-sm-offset-2">
												<a class="btn btn-primary" data-origin="control-base"> <i class="fa fa-plus"></i> 新增项目</a>
											</div>
										</div>
									</div>
								</div>
						<div class="panel panel-sub" id="200">
							<div class="panel-heading">
								<div class="panel-control">
									<button class="btn btn-default" data-target="#body-200" data-toggle="collapse" aria-expanded="true" onclick="$(this).find('i').toggleClass('fa-chevron-down  fa-chevron-right')"><i class="fa fa-chevron-down"></i>
									</button>
								</div>
					 			<div class ="panel-title">禁止编辑样式 <span class="text-success">class="panel panel-sub"</span></div>	
					 		</div>
							<div id="body-200" class="panel-body collapse in" style = "padding-top:35px!important;" aria-expanded="true">
								<div class="form-group">
									<label class="label-control col-sm-1 col-sm-offset-1 text-right">描述</label>
									<div class ="col-sm-4">
										<p style="word-wrap:break-word;width:100%;">1234561231231231232sdfsdfsdfsdfsdfa13123213123123213123123sdfsdfsdfsdfsdfa1312321312312sdfsdfsdfsdfsdfa1312321312312sdfsdfsdfsdfsdfa1312321312312</p>
									</div>
									<label class="label-control col-sm-1 text-right">描述</label>
									<div class = "col-sm-5">
										<p style="word-wrap:break-word;width:100%;">1234561231231231232sdfsdfsdfsdfsdfa13123213123123213123123</p>
									</div>
								</div>
								<div class="form-group">
									<label class="label-control col-sm-1 col-sm-offset-1 text-right">描述</label>
									<div class = "col-sm-4">
										<p style="word-wrap:break-word;width:100%;">1234561231231231232sdfsdfsdfsdfsdfa13123213123123213123123</p>
									</div>
									<label class="label-control col-sm-1 text-right">描述</label>
									<div class = "col-sm-5">
										<p style="word-wrap:break-word;width:100%;">1234561231231231232sdfsdfsdfsdfsdfa13123213123123213123123</p>
									</div>
								</div>
								<div class ="from-group edit-control-wrap">
									<label class="col-sm-1 col-sm-offset-11 text-right"> 
									  <a class="btn btn-primary" data-origin="control-edit">
                                         <i class="fa fa-edit"></i> 编辑
                                      </a>
									</label> 
									<label class="col-sm-2 col-sm-offset-10 hidden text-right"> 
									  <a class="btn btn-success" data-origin="control-base"> 
										<i class="fa fa-check"></i> 保存</a>
									  <a class="btn btn-default" data-origin="control-base"> 
									    <i class="fa fa-reply"></i> 取消</a>
									</label> 
								</div>
								
							</div>
						</div>
						<div class="panel panel-sub" id="400">
							<div class="panel-heading">
								<div class="panel-control">
									<button class="btn btn-default" data-target="#body-400" data-toggle="collapse" aria-expanded="true" onclick="$(this).find('i').toggleClass('fa-chevron-down  fa-chevron-right')"><i class="fa fa-chevron-down"></i>
									</button>
								</div>
					 			<div class ="panel-title">可编辑样式 <span class="text-success">class="panel panel-sub"</span></div>	
					 		</div>
							<div id="body-400" class="panel-body collapse in" style = "padding-top:35px!important;" aria-expanded="true">
								<div class="form-group">
									<div class = "control-edit">
										<label class="label-control col-sm-1 col-sm-offset-1 text-right">描述</label>
										<div class ="col-sm-4 text-left">
											<p style="word-wrap:break-word;width:100%;">1234561231231231232sdfsdfsdfsdfsdfa11231231232sdfsdfsdfsd31232sdfsdfsdfsdfsdfa11231231232sdfsdfsdfsd31232sdfsdfsdfsdfsdfa11231231232sdfsdfsdfsd</p>
										</div>
									</div>
									<div class = "control-edit hidden">
										<label class="label-control col-sm-1 col-sm-offset-1 text-right" style="margin-top:5px">描述</label>
										<div class = "col-sm-4">
											<input id="10" style="width:100%" class="form-control" name="baseinput" type="text" placeholder="请输入配置路径" style="width:100%"/>
										</div>
									</div>
									<div class ="edit-remark">
										<label class="col-sm-1 pull-left "> 
											 <a class="btn btn-small-icon btn-hover-primary"data-origin="control-edit">
		                                        <i class="fa fa-edit"></i>
		                                     </a>
										</label> 
										<label class="col-sm-1 pull-left hidden">
											<a class="btn btn-small-icon btn-hover-primary" style = "padding:4px!important;margin-top:3px" data-origin="control-base">
		                                        <i class="fa fa-check"></i>
		                                     </a> 
										</label>
									</div>
								</div>
							</div>
						</div>
						<div class="panel panel-sub" id="300">
								<div class="panel-heading">
									<div class="panel-control">
										<button class="btn btn-default" data-target="#body-300" data-toggle="collapse" aria-expanded="true" onclick="$(this).find('i').toggleClass('fa-chevron-down  fa-chevron-right')"><i class="fa fa-chevron-down"></i>
										</button>
									</div>
									<div class="panel-title">环境 <span class="text-success">class="panel panel-sub"</span></div>
								</div>
								<div id="body-300" class="panel-body withtitle collapse in" aria-expanded="true">
									<div class="form-group label-height">
										<label for = "tabPort" class="col-sm-2 col-sm-offset-2 control-label text-left"> 
											<font color=red>*</font>容器端口
										</label>
										 <label for = "propol" class="col-sm-1 control-label text-left"> 
										 <font color=red>*</font>协议
										 </label>
										<label for = "netType" class="col-sm-2  col-sm-offset-1 control-label  text-left"> 
										<font color=red>*</font>网络类型
										</label>
										 <label for = "mainPort" class="col-sm-2 control-label text-left"> 
											<font color=red>*</font>主机端口
										</label>
									</div>
									<div class="form-group">
										<div class="col-sm-2 col-sm-offset-2">
											<input  id="tabPort" class="form-control" type="text" placeholder="请选输入端口" style="width:100%"/>
										</div> 
										<div class="col-sm-2">
											<select id="propol" name="regionName" class="form-control"style="width:100%;color:#c5c5c5">
												<option value="" selected>请选择协议</option>
												<c:forEach items="${RegionList}" var="region">
												<option value="${region.regionCode}">${region.regionName}</option>
												</c:forEach>
											</select>
										</div>
										<div class="col-sm-2">
											<select id="netType" name="regionName" class="form-control" style="width:100%;color:#c5c5c5">
												<option value="" selected>请选择配置路径</option>
												<c:forEach items="${RegionList}" var="region">
												<option value="${region.regionCode}">${region.regionName}</option>
												</c:forEach>
											</select>
										</div>
										<div class="col-sm-2">
											<input  id="tabPort" class="form-control" type="text" placeholder="请选输入主机端口" style="width:100%"/>
										</div>
										<div class ="col-sm-1 pull-left">
                                             <a class="btn btn btn-icon btn-hover-primary">
                                                 <i class="fa fa-minus"></i>
                                             </a>
										</div>
									</div>
									<div class="form-group">	
										<div class="col-sm-2 col-sm-offset-2">
											<a class="btn btn-primary" data-origin="control-base"> <i class="fa fa-plus"></i> 新增项目</a>
										</div>
									</div>
								</div>
							</div>
							<div class="panel panel-sub" id="500">
								<div class="panel-heading">
									<div class="panel-control">
										<button class="btn btn-default" data-target="#body-500" data-toggle="collapse" aria-expanded="true" onclick="$(this).find('i').toggleClass('fa-chevron-down  fa-chevron-right')"><i class="fa fa-chevron-down"></i>
										</button>
									</div>
									<div class="panel-title">暂无可用项 <span class="text-success">class="panel panel-sub"</span>
									</div>
								</div>
								<div id="body-500" class="panel-body collapse in" aria-expanded="true">
									<div class="empty_wrapper">暂无可用项   <span class="text-success">class="empty_wrapper"</span></div>
									<div class="mar-btm"></div>
									<div class="empty_wrapper empty_wrapper_sm">暂无可用项 <span class="text-success">class="empty_wrapper empty_wrapper_sm"</span></div>
									
									<!-- <div class= "form-group">
										<div class = "col-sm-10  col-sm-offset-1 none-item">
											<span id="10"style="padding:8px 12px!important;border-radius:0px;">暂无可用项</span>
										</div>
									</div>
									<div class="form-group">	
										<div class="col-sm-2 col-sm-offset-1">
											<a class="btn btn-primary" data-origin="control-base"> <i class="fa fa-plus"></i> 新增项目</a>
										</div>
									</div> -->
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="row form-fixed-btns affix">
            <div class="col-md-7 text-right">
                <a class="btn btn-submits">提交</a></div>
            <div class="col-md-2 text-left">
                <a class="btn btn-cancels" href="">返回上一页</a></div>
        </div>

		<!--=========================  过程可视化消息栏  ==========================-->
		<jsp:include page="../framework/aside.jsp" />

		<!--=========================  左侧菜单  ==========================-->
		<jsp:include page="../framework/lefter.jsp" />

		<!--=========================  页面底部版权信息  ==========================-->
		<jsp:include page="../framework/footer.jsp" />

	</div>

	<!--=========================  返回顶层按钮  ==========================-->
	<button class="scroll-top btn">
		<i class="pci-chevron chevron-up"></i>
	</button>
	<!--=========================  选择皮肤功能  ==========================-->
	<jsp:include page="../framework/page-set.jsp" />

	<div id="floating-top-right" class="floating-container"></div>
</div>
<!--===================================================-->
<!-- END OF CONTAINER -->

<jsp:include page="../framework/script.jsp" />
<script src="${pageContext.request.contextPath}/static/js/common/bootdatatable.init.js"></script>
	<script src="${pageContext.request.contextPath}/static/plugin/bootstrap-table/bootstrap-table.min.js"></script>
	<script src="${pageContext.request.contextPath}/static/plugin/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
<script src="${pageContext.request.contextPath}/static/plugin/moment-develop/moment.min.js"></script>
<script src="${pageContext.request.contextPath}/static/plugin/moment-develop/local-zh-cn.js"></script>
<script src="${pageContext.request.contextPath}/static/plugin/daterangepicker/daterangepicker.js"></script>
<script type="text/javascript">
/*校验  */
var strRegex =  "[a-zA-Z0-9][-a-zA-Z0-9]{0,62}" 
+ "(/.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+/.?";

//时间选择框
$('#daterangepicker').daterangepicker({
    autoApply: true,
		showDropdowns: true,
		timePicker: true,
		timePickerIncrement: 5,
		timePicker24Hour: true,
    //minDate:moment().subtract(15, 'days'),                          
    maxDate: new Date(),
//     minDate: moment().subtract(1, 'months'),
//     endDate: new Date(),
    opens: "left",
		/* dateLimit: {
		 "days": 15
		 }, */
    alwaysShowCalendars: true,
    ranges: {
        "今天": [moment().format('YYYY-MM-DD 00:00'),moment().format('YYYY-MM-DD HH:mm')]
        ,"昨天": [moment().subtract(1, 'days').format('YYYY-MM-DD 00:00'),moment().subtract(1, 'days').format('YYYY-MM-DD 23:59')]
        ,"最近7天": [moment().subtract(7, 'days').format('YYYY-MM-DD 00:00'),moment().format('YYYY-MM-DD HH:mm')]
        ,"最近15天": [moment().subtract(15, 'days').format('YYYY-MM-DD 00:00'),moment().format('YYYY-MM-DD HH:mm')]
        ,"本月": [moment().format('YYYY-MM-01 HH:mm'),moment().format('YYYY-MM-DD HH:mm')]
        //,"本季度": [moment().startOf('quarter').format('YYYY-MM-DD'),moment().endOf('quarter').format('YYYY-MM-DD')]
    },
    locale: {
        format: 'YYYY-MM-DD HH:mm',
        separator:" ~ ",
        applyLabel: '确定',
        cancelLabel: '取消',
        customRangeLabel: "自定义日期",
        daysOfWeek: ["日", "一", "二", "三", "四", "五", "六"],
        monthNames:["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"]
    }
},function (start, end, label) {
    //选择时间之后操作
	startTime = start.format('YYYY-MM-DD HH:mm');
    endTime = end.format('YYYY-MM-DD HH:mm');
});
//初始化
$(function(){
/*表单验证  */
//表单验证
	 $('#validatorForm').bootstrapValidator({
   		   message: 'This value is not valid',
           feedbackIcons: {
        	   valid:'glyphicon glyphicon-ok',
        	   invalid:'glyphicon glyphicon-remove',
        	   validating:'glyphicon glyphicon-refresh'
           },
           excluded: [':read-only'],
            fields: {
            	remark :{
					message : '实例描述验证失败',
					validators : {
						notEmpty : {//非空验证：提示消息
							message : '实例描述不能为空'
						},
						stringLength: {/*长度提示*/
						    min: 1,
						    max: 100,
						    message: '实例描述长度必须在1到100个字之间'
						   }
					}
				},
            	dockerClusterName: {
            		 message: '容器集群验证失败',
                    validators: {
                        notEmpty: {
                            message: '容器集群不能为空'
                        }
                    }
                },
                cpuConfig:{	
                    group: '.col-lg-3',
                	validators:{
                		numeric: {
                			message:'CPU输入值为数字'
                        }
                	}
                },
                memoryConfig:{	
                    group: '.col-lg-3',
                	validators:{
                		numeric: {
                			message:'内存输入值为数字'
                        }
                	}
                },
                replicas: {
                	group:'.col-xs-3',
            		 message: '容器个数验证失败',
                    validators: {
                        notEmpty: {
                            message: '容器个数不能为空'
                        },
                        numeric: {
                        	message: '容器个数只能输入数字'
                        }    	
                    }
                },
                port:{
                	message: '容器端口验证失败',
                    validators: {
                        notEmpty: {
                            message: '容器端口不能为空'
                        },
                        numeric: {message: '容器端口只能输入数字'}
                    }
                },
                publishedPort1:{
                	message: '主机端口验证失败',
                    validators: {
                        notEmpty: {
                            message: '主机端口不能为空'
                        },
                        numeric: {message: '主机端口只能输入数字'}
                    }
                },
                hip  :{
                    validators: {
	                     	callback:{
	                			message: 'IP与域名验证失败',
	                		   callback: function(value,validator,ev){
	                			   var objDome=$(ev).parents('.form-group').find("input[type='text']")[1];
	                			   var doname=$(objDome).val();
	                			   if(!value && !doname){
		                					validator.updateStatus($(objDome),'VALID');
	                				   return true;
	                			   };
	                			   if(value){
	                			   		var reg=/^(\d+)\.(\d+)\.(\d+)\.(\d+)$/g;
	    	                    	    var re=new RegExp(reg);
	    	                    	    if(re.test(value)){
	    	                    	    	if(RegExp.$1<256&&RegExp.$2<256&&RegExp.$3<256&&RegExp.$4<256){
	    		                				validator.updateStatus($(objDome),'NOT_VALIDATED');
	    	                    	    		validator.validateField($(objDome));
												return true;	
	    	                    	    	}
	                			   		}
	                			 	}
	                			   return false;
		                	   }
		                    }
	                    }
	                },
                doname   :{
                    validators: {
                    	callback:{
                			message: 'IP与域名验证失败',
                		   callback: function(value,validator,ev){
                			   var objHip=$(ev).parents('.form-group').find("input[type='text']")[0];
                			   var hip=$(objHip).val();
                			   if(!value && !hip){
                				   validator.updateStatus($(objHip),'VALID');
                				   return true;
                			   };
                			   if(value && hip){
                				   validator.updateStatus($(objHip),'VALID');
                				   return true;
                			   }
            			   		return false;
                           }
                	   },
                    	regexp: {
                            regexp: /([a-z0-9][a-z0-9\-]*?\.(?:com|cn|net|org|gov|info|la|cc|co)(?:\.(?:cn|jp))?)$/,
                            message: '域名输入错误'
                        } 
                    }
                  },
                  serviceNameDe :{
                	  validators : {
  			 			regexp: {
                     			regexp: /^[a-z0-9/_.-\s+]+$/,
                     			message: '自定义服务名称不能为汉字，大写字母，且不能以数字开头'
                 			}
  						}
                  },
	                conPath:{
	                    group: '.col-sm-4',
			    		 validators: {
			    			 regexp: {
		                         regexp: /^[^/\\](?!.*\\.*$)/,
		                         message: '路径不能以“/”开头,不包含“\\”'
		                     },
				        	   callback:{
				        			message: '上传文件与配置文件不匹配',
				        		    callback: function(value,validator,ev){
				        		    	var objfile = $(ev).parents('.host-group').find("input[type='file']");
				        		    	var file = $(objfile).val();
				        		    	if(!value && !file){
				        		    		validator.updateStatus(objfile, 'VALID');
				        		    		return true;
				        		    	}
				        		    	if(value && !file){
				        		    		validator.updateStatus(objfile, 'VALID');
				        		    		return true;
				        		    	}
				        		    	//都不空
				        		    	if( value && file ){
				        		    		var c=value.substring(value.lastIndexOf("/")+1,value.length);
					        			   // var file=$("#file").val();
					        			    var d=file.substring(file.lastIndexOf("\\")+1,file.length);
					        			    var e = d.substring(d.lastIndexOf("."),d.length);
					        			    if(c !=null  && c != ""){
					        			    	var f = c.substring(c.lastIndexOf("."),c.length);
					        			    }
					        			    var filetypes =[".7z",".zip",".rar",".cab",".iso",".tar",".bz2",".bzip2",".gz",".gzip",".z",".rpm"]; 
					        			    if(c == null || c == ""){
					        			    	if(osType==2 && e == ".tar"){
					        			    		validator.updateStatus(objfile, 'VALID');
		    				                   	    return true;
		        								}else if(osType==1 && e == ".zip"){
		        									validator.updateStatus(objfile, 'VALID');
		    				                   	    return true; 
		        								}else{
		        									validator.updateStatus(objfile, 'VALID');
		        									return false;
		        								}
					        			    }else if(f){
					        			    	for(var i =0; i<filetypes.length;i++){ 
					        						if(filetypes[i]==e){
						        						if(osType==2 && e == ".tar" && (c == null ||c == "")){
						        							validator.updateStatus(objfile, 'VALID');
						        							return true;
						        						}else if(osType==1 && e == ".zip" && (c == null ||c == "")){
						        							validator.updateStatus(objfile, 'VALID');
						        							return true;
						        						}else{
						        							validator.updateStatus(objfile, 'VALID');
						        							return false;
						        						}
						        						break;
					        						}
					        					} 
					        			    	if (c==d){
						                   	    	validator.updateStatus(objfile, 'VALID');
						                   	    	return true;
						                   	    }
					        			    }
					        			    //return false;
				                  		 }
				        		    	 return false;        			   	
				                   }
				        	   }
				           }
			    	}, 
			    	configFile: {
	                    group: '.col-sm-4',
			           validators: {
			        	   callback:{
			        			message: '文件与路径不匹配或压缩包类型不正确',
			        		    callback: function(file,validator,ev){
			        		    	var objpath = $(ev).parents('.host-group').find("input[type='text']");
			        		    	var path = $(objpath).val();
			        		    	if(!path && !file){
			        		    		validator.updateStatus(objpath, 'VALID');
			        		    		return true;
			        		    	}
			        		    	if(path && !file){
			        		    		validator.updateStatus(objpath, 'VALID');
			        		    		return true;
			        		    	}
			        		    	//都不空
			        		    	if( path && file ){
			        		    		var c=path.substring(path.lastIndexOf("/")+1,path.length);
			        					//var file=$("#file").val();
				        			    var d=file.substring(file.lastIndexOf("\\")+1,file.length);
				        			    var e = d.substring(d.lastIndexOf("."),d.length);
				        			    if(c !=null && c != ""){
				        			    	var f = c.substring(c.lastIndexOf("."),c.length);
				        			    }
				        			    var filetypes =[".7z",".zip",".rar",".cab",".iso",".tar",".bz2",".bzip2",".gz",".gzip",".z",".rpm"]; 
				        			    if(c == null || c == ""){
				        			    	if(osType==2 && e == ".tar"){
				        			    		validator.updateStatus(objpath, 'VALID');
	    				                   	    return true;
	        								}else if(osType==1 && e == ".zip"){
	        									validator.updateStatus(objpath, 'VALID');
	    				                   	    return true; 
	        								}else{
	        									validator.updateStatus(objpath, 'VALID');
	        									return false;
	        								}
				        			    }else if(f){
				        			    	for(var i =0; i<filetypes.length;i++){ 
				        						if(filetypes[i]==e){
					        						if(osType==2 && e == ".tar" && (c == null ||c == "")){
					        							validator.updateStatus(objpath, 'VALID');
					        							return true;
					        						}else if(osType==1 && e == ".zip" && (c == null ||c == "")){
					        							validator.updateStatus(objpath, 'VALID');
					        							return true;
					        						}else{
					        							validator.updateStatus(objpath, 'VALID');
					        							return false;
					        						}
					        						break;
				        						}
				        					} 
				        			    	if (c==d){
					                   	    	validator.updateStatus(objpath, 'VALID');
					                   	    	return true;
					                   	    }
				        			    }
				        			    
				                   }
			        		    	return false;
			                   }
			        	   }
			           }
			       }
               }
        });	
})
/* 点击编辑按钮 */
$(document).on('click', '.edit-control-wrap label a.btn', function() {
		if($(this).hasClass('btn-success')){
			$('#appForm').data('bootstrapValidator').validate();
			if(!$('#appForm').data('bootstrapValidator').isValid()){
				//toast.info('请输入正确的信息 ！', '温馨提示');
				//标记验证结果
				return false;
			}
			updateApp();
		}else{
			$('.edit-control-wrap > label').toggleClass('hidden');
			/* $('.control-wrap').toggleClass('hidden'); */
		}
	});
/* 点击配置描述编辑信息 */
$(document).on('click', '.edit-remark label a.btn', function() {
		if($(this).hasClass('btn-success')){
			$('#appForm').data('bootstrapValidator').validate();
			if(!$('#appForm').data('bootstrapValidator').isValid()){
				//toast.info('请输入正确的信息 ！', '温馨提示');
				//标记验证结果
				return false;
			}
			updateApp(); 
		}else{
			$('.edit-remark > label').toggleClass('hidden');
			$('.control-edit').toggleClass('hidden');
		}
	});
</script>

</body>
</html>